<script setup>
import { ref,reactive,computed,watch,watchEffect ,nextTick} from "vue";
import Message from "@/components/message.vue"

import {sendMessage} from "@/api/chat"
import { useStore } from "@/pinia/index";
const store=useStore()
const props = defineProps(['session',"meId"])
const input=ref("")
const record=ref(null)
console.log("record.value:",record.value);
watchEffect(()=>{
	if(props?.session?.info?.length){
		showBottom()
		console.log("props?.session?.info?.length:",props?.session?.info?.length);
	}
})
function showBottom(){
	nextTick(()=>{
		record.value?.scrollIntoView()
	})
}
function send(){
	if(input.value){
		const obj={
			id:store.id,
			uid:props.session.uid,
			message:input.value,
			isMe:true,
			loading:true
		}
		input.value=""
		const index=props.session.info.length
		props.session.info.push(obj)
		showBottom()
		sendMessage(obj).then(res=>{
			if(res===true){
				delete props.session.info[index].loading
			}
		})
	}
	
}
</script>


<template>

<div class="chat">
	<div class="header">{{props.session.uid}}</div>
	<div class="record">
		<Message v-for="item in props.session.info" :uid="props.session.uid" :message="item.message" :isMe="item.isMe" :loading="item.loading"></Message>
		<div ref="record"></div>
	</div>
	<div class="Interaction">
		<textarea name="" id="" v-model="input"></textarea>
		<button @click="send" v-show="input">发送</button>
	</div>
</div>

</template>


<style scoped>
.chat{
	height: 100%;
	width: 100%;
}
.header{
	height: calc( 2rem - 1px );
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	line-height: 2rem;
	background: #282828;
    border-bottom: 1px solid #3d3d3d;
}
.record{
	height: calc( 100% - 2rem + 4px - 10px - 2rem );
	background-color: rgb(40, 40, 40);
	font-size: 12px;
	overflow: auto;
	padding-top: 10px;
}
.record::-webkit-scrollbar{/*整个滚动条  https://m.php.cn/article/480425.html*/
    width: 5px;
    background-color: rgb(199, 199, 199);
}
.record::-webkit-scrollbar-thumb{/*滚动条*/
    background-color:rgb(34, 34, 34);
	border-left: 1px solid rgb(63, 63, 63);
    border-radius: 5px;
}
.record::-webkit-scrollbar-track{
    width: 20px;
    background-color: rgb(0, 216, 97);
}
.record::-webkit-scrollbar-button{/*上下按钮*/
height:0;

}
.record::-webkit-scrollbar-track-piece{
    width: 20px;
    background-color: rgb(91, 91, 91);
}
.record,.Interaction{
	width: 100%;
}
.Interaction{
	background-color: rgb(237, 237, 237);
	height: calc( 2rem + 4px );
	padding:2px 0 ;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.Interaction textarea {
	font-size: 12px;
	flex:1;
	resize:none;
	height: 2rem;
	border: 0;
	outline: 0;
}
.Interaction textarea::-webkit-scrollbar{
	width: 0;
}
.Interaction button{
	background-color: rgb(141, 141, 141);
	border: 0;
	color: #fff;
}
.Interaction button{
	user-select: none;
	background-color: rgb(0, 206, 7);
}

</style>